.g-container{

  > .g-header{
    padding: 0 20rpx;
    &.u-hd{
      justify-content: space-between;
      .cb-label{
        color: #ffffff;
        font-size: 26rpx;
      }
    }
  }
  .date-wrap{
    text-align: center;
    height: 72rpx;
    line-height: 72rpx;
    background: #ffffff;
    margin-top: 14rpx;
  }


  .g-main{
    height: 0;
    .li-wrap{
      margin-top: 12rpx;
      background: #ffffff;
      .li-top{

        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 72rpx;
        padding: 0 20rpx;
        font-weight: bold;
        border-bottom: 2rpx solid #efefef;
        color: #0251FF;

        &:before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 8rpx;
          height: 36rpx;
          background: #0251FF;
        }
        .top-left{
          text-align: left;
        }
        .top-center{
          text-align: center;
        }
        .top-right{
          text-align: right;
          font-size: 50rpx;
        }

      }
      .li-mid{
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx;
        .cel{
          //width: 33%;
          text-align: right;
          margin: 12rpx 0;
          &:nth-child(3n+1){
            //width: 32%;
          }
          &:nth-child(3n+2),&:nth-child(3n+3){
            flex: 1;
          }
          .cel-key{
            font-weight: bold;
            font-size: 28rpx;
          }
          .cel-val{
            font-size: 24rpx;
            margin-top: 8rpx;
          }
        }
      }
      .li-bot{
        display: flex;
        justify-content: flex-end;
        padding: 20rpx 22rpx;
        border-top: 2rpx solid #efefef;
        .m-btn{
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          width: 120rpx;
          height: 57rpx;
          background: #0251FF;
          border-radius: 8rpx;
          font-size: 25rpx;
          &+ .m-btn {
            margin-left: 10rpx;
          }
          &.m-btn1{
            background: #6F9EFF;
            &:active{
              background: #6888e2;
            }
          }
          &.m-btn2{
            background: #9A9A9A;
            &:active{
              background: #848484;
            }
          }
          &.m-btn3{
            &:active{
              background: #0248d5;
            }
          }
        }
      }
      .li-child{
        padding: 0 20rpx 10rpx;
        & > .li-wrap{
          background: #EBF1FF;
          color: #000;
          &.active{
            color: #0251FF;
            & > .li-top{
              color: #0251FF;
            }
          }
          & > .li-top{
            border-bottom: 2rpx solid #fff;
            color: #000;
            &:before{
              content: none;
            }
          }
          & > .li-bot{
            border-top: 2rpx solid #fff;
          }
        }
      }
    }


    .loading{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .empty{
      background: #ffffff;
      height: 100%;
    }
    .prompt-msg{
      text-align: center;
      color: #969799;
      font-size: 28rpx;
    }
  }

  .g-footer{
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 10rpx 20rpx 20rpx;
    font-size: 24rpx;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    .num{
      color: #0251FF;
      margin-left: 8rpx;
    }
    &>view + view{
      margin-left: 16rpx;
    }
  }
}
